import React, { useState, useEffect } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import Item from './components/Item/Item'
import PubSub from 'pubsub-js'
import './App.css'
export default function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      todoName: '123',
      isDone: true,
    },
  ])
  useEffect(() => {
    const addId = PubSub.subscribe('add', (_, todoName) => {
      // 将新数组赋值给todos.因为useState中自动帮我们做了性能优化.如果不给todos换一个新地址,则react认为数据没有变化,就不会更新组件了
      // setTodos(newTodos)
      setTodos((todos) => {
        // 根据任务名,创建任务对象
        const obj = {
          // 新增的数据的id为整数,不能和其他数据的id重复
          // id解决思路: 如果todos有数据,则永远找到数组中最后一条数据的id.在这个id的基础上加1.作为新数据的id. 如果todos没有数据,是空数组,则第一条数据的id从1开始
          id: todos.length ? todos[todos.length - 1].id + 1 : 1,
          todoName,
          isDone: false,
        }
        // 给todos换一个新的壳
        const newTodos = [...todos]
        // 往新的数组中添加新任务
        newTodos.push(obj)
        return newTodos
      })
    })
    return () => {
      PubSub.unsubscribe(addId)
    }
  }, [])
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header></Header>
        <div>
          <List>
            {todos.map((item) => (
              <Item key={item.id} todo={item}></Item>
            ))}
          </List>
          <Footer></Footer>
        </div>
      </div>
    </div>
  )
}
